<template>
  <div class="page-container" v-cloak>
    <!-- 使用active属性增加动画效果，添加占位符保持布局一致性 -->
    <a-skeleton :loading="loading" active :paragraph="{ rows: 10 }" class="skeleton-container"
      :class="{ 'skeleton-loaded': !loading }">
      <div>
        <div class="topDownloads">
          <div class="cardTop">
            <div class="cardTitle">
              {{ $t('top_download') }}
            </div>
            <div class="rightType">
              <a :class="tag === 'games' ? 'item color' : 'item'" @click="change('games')">{{ $t('games') }}</a>
              <a :class="tag === 'apps' ? 'item color' : 'item'" @click="change('apps')">{{ $t('apps') }}</a>
            </div>
          </div>
          <div class="indexContent">
            <div v-for="(item, index) in topDownLoadList" :key="index" class="app-item-wrapper">
              <AppItem @click="handleClick(item)" class="appItem" :item="item" :index="index + 1" />
            </div>
          </div>
        </div>
        <AppItemList :isIndex="true" :list="aiToolsApp" :name="'AI Tools App'" />
        <HotList :isIndex="true" :list="hotGames" :name="'HOT Games'" />
        <HotList :isIndex="true" :list="topDownLoadList" :name="'HOT Apps'" />
        <div class="about">
          <div class="aboutTitle">
            About APKDock
          </div>
          <div class="aboutContent">
            APKDock is a third-party app store primarily for Android devices. It serves as a platform where users can
            download APK (Android Package Kit) files for a wide variety of apps and games
          </div>
          <div class="aboutContent">
            • Vast Library: APKDock hosts a large collection of Android apps, including those that might not be
            available
            on
            the Google Play Store due to regional restrictions, developer preference, or other reasons
          </div>
          <div class="aboutContent">
            • No Regional Restrictions: Users can often download apps that are geographically restricted on the official
            app
            store.
          </div>
        </div>
      </div>
    </a-skeleton>
  </div>
</template>

<script setup>
import { useI18n } from 'vue-i18n'
const topDownLoadGame = ref([])
const topDownLoadApp = ref([])
const topDownLoadList = ref([])
const tag = ref('games')
const aiToolsApp = ref([])
const hotGames = ref([])
const route = useRoute()
const loading = ref(false)
const config = useRuntimeConfig();
const { locale } = useI18n()
const handleClick = (item) => {
  let url = (route.params.hasOwnProperty('language') ? "/" + route.params.language : '') + `/android/${item.app_slug}`
  navigateTo(url)
}

const change = (type) => {

  if (type === 'apps') {
    topDownLoadList.value = [...topDownLoadApp.value]
    tag.value = 'apps'
  } else {
    topDownLoadList.value = [...topDownLoadGame.value]
    tag.value = 'games'
  }
}

// 初始化加载状态
loading.value = true

const loadIndex = async () => {
  try {
    // 加载状态已在组件初始化时设置
    const { data, error } = await useApi('/api/app/getAppCategoryList', {
      method: 'GET',
      params: {
        language: route.params.hasOwnProperty('language') ? route.params.language : 'en',
        category_id: '1,2,3,4,5'
      }
    })
    if (error.value) {
      console.error('加载数据失败:', error.value)
      return
    }
    topDownLoadGame.value = data.value.top_downloads_game.slice(0, 9);
    topDownLoadApp.value = data.value.top_downloads_app.slice(0, 9);
    aiToolsApp.value = data.value.al_tools_app.slice(0, 9);
    hotGames.value = data.value.hot_games.slice(0, 8);
    topDownLoadList.value = [...topDownLoadGame.value]

  } catch (err) {
    console.error('请求出错:', err)
  } finally {
    loading.value = false
  }
}
loadIndex()
const structuredData = {
  "@context": useRuntimeConfig().public.baseURL,
  "@type": "WebSite",
  name: "APKDock",
  url: useRuntimeConfig().public.baseURL,
  description: "Download the latest and older versions of Android apps and games securely and for free on APKDock. Explore a wide variety of APKs, all virus-checked.",
}
useHead({
  title: "Android App Downloads: Discover Free APKs on APKDock - APKDock",
  htmlAttrs: {
    lang: locale.value 
  },
  meta: [
    {
      name: 'description',
      content: computed(() => `Download the latest and older versions of Android apps and games securely and for free on APKDock. Explore a wide variety of APKs, all virus-checked. - APKDock`),
    },
    {
      name: 'robots',
      content: 'noindex,nofollow',
    },
  ],
  script: [
    {
      type: 'application/ld+json',
      innerHTML: JSON.stringify(structuredData),
      dangerouslyDisableSanitizers: ['innerHTML']
    }
  ],
  link: [
    {
      rel: 'canonical',
      href: computed(() => {
        return `${config.public.apiBase}${route.fullPath}`;
      })
    }
  ]
})
</script>
<style scoped lang="less">
/* 添加v-cloak指令样式，防止未编译的模板闪烁 */
[v-cloak] {
  display: none;
}

/* 页面容器样式 */
.page-container {
  min-height: 100vh;
}

/* 骨架屏容器样式 */
.skeleton-container {
  width: 100%;
  transition: all 0.5s ease;
  opacity: 1;
}

.skeleton-loaded {
  opacity: 1;
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.topDownloads {
  border-radius: 12px;
  border: 1px solid var(--Gray-100, #F3F4F6);
  background: #FFF;
  /* Card Shadow */
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  display: flex;
  padding: 16px 24px;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  align-self: stretch;
  margin: 12px 0;

  .indexContent {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;

    .app-item-wrapper {
      flex-basis: calc(33.33% - 11px);

      @media screen and (max-width: 768px) {
        flex-basis: calc(50% - 8px);
      }

      @media screen and (max-width: 430px) {
        flex-basis: 100%;
      }
    }
  }

  .cardTop {
    display: flex;
    justify-content: space-between;
    width: 100%;

    .rightType {
      margin-left: auto;
      display: flex;
      gap: 4px;
    }

    .item {
      box-sizing: content-box;
      display: flex;
      padding: 6px 16px;
      justify-content: center;
      align-items: center;
      border-radius: 100px;
      border: 1px solid var(--Indigo-200, #E0D9FC);
      background: var(--Indigo-50, #F8F6FE);
      color: var(--Text-Text, #505662);
      font-family: Roboto;
      font-size: 12px;
      font-style: normal;
      font-weight: 500;
      /* 166.667% */
      text-transform: capitalize;

      &:hover {
        text-decoration: none;
        /* hover 时也不显示下划线 */
        color: #775CE1;
        /* 保持原有颜色 */
      }
    }

    .color {
      color: #775CE1;
    }

    .cardTitle {
      color: var(--Text-Title, #3E4351);
      font-family: Roboto;
      font-size: 16px;
      font-style: normal;
      font-weight: 700;
      line-height: 40px;
    }
  }

  .indexContent {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;

    .app-item-wrapper {
      flex-basis: calc(33.33% - 11px);

      @media screen and (max-width: 900px) {
        flex-basis: calc(50% - 8px);
      }

      @media screen and (max-width: 430px) {
        flex-basis: 100%;
      }
    }
  }
}

.cardTitle {
  color: var(--Text-Title, #3E4351);
  font-family: Roboto;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 40px;
}

.hotGame {
  margin-bottom: 24px;

  @media screen and (max-width: 1280px) {
    overflow-x: auto;
    /* 添加水平滚动条 */
    overflow-y: hidden;
    /* 隐藏垂直滚动条 */

    /* 添加以下样式来美化滚动条 */
    &::-webkit-scrollbar {
      height: 6px;
      /* 滚动条高度 */
    }

    &::-webkit-scrollbar-track {
      background: #f1f1f1;
      /* 滚动条轨道颜色 */
      border-radius: 3px;
    }

    &::-webkit-scrollbar-thumb {
      background: #888;
      /* 滚动条滑块颜色 */
      border-radius: 3px;
    }

    &::-webkit-scrollbar-thumb:hover {
      background: #555;
      /* 滚动条滑块悬停颜色 */
    }
  }

  /* 移除固定最小宽度，改用内容宽度 */
  .ant-row {
    width: max-content !important;
    min-width: 1415px !important;
    flex-wrap: nowrap !important;
  }

  .ant-col {
    flex-shrink: 0 !important;
    /* 防止列被压缩 */
    width: auto !important;
    /* 使用自动宽度 */
  }
}

.flex {
  display: flex;
}

.about {
  width: 100%;
  margin-bottom: 32px;
  border-radius: 12px;
  border: 1px solid var(--Gray-100, #F3F4F6);
  background: #FFF;
  /* Card Shadow */
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  display: flex;
  padding: 16px 24px;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  align-self: stretch;

  .aboutTitle {
    color: var(--Text-Title, #3E4351);
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px;
    /* 175% */
  }

  .aboutContent {
    width: 100%;
    color: var(--Text-Text, #505662);
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    /* 171.429% */
  }
}

//@media screen and (max-width: 1164px)  {
//  .appItem{
//    margin-bottom: 16px;
//    width:45%
//  }
//}
//@media screen and (max-width: 1164px)  {
//  .appItem{
//    margin-bottom: 16px;
//    width:100%
//  }
//}</style>